import { Component } from 'react';
import './index.less'
import { Search } from 'react-vant';
import HomeSwiper from '../../components/Home/swiper'
import Menus from '../../components/Home/menus';
import TopList from '../../components/Home/topList';
import Nav from '../../components/Home/nav';
import GoodsItem from '../../components/Home/GoodsItem';
import { getHomeList, getTopList,getGoodsList} from '../../api/home'
import MyLoading from '../../components/loading';
import { Toast } from 'react-vant';
import WithRouter from '../../router/withRouter';
class Home extends Component {
    state = {
        swiperList: [],
        menus: [],
        tabList: [],
        topList: [],
        type:'1',
        list:[]
    }
    render() {
        let { swiperList, menus, tabList, topList,list} = this.state;
        return (
            <div>
                {
                    topList.length === 0 && <MyLoading></MyLoading>
                }
                {
                    topList.length !== 0 && (
                        <div className="home">
                            <Search
                                shape="round"
                                background="#e93323"
                                placeholder="请输入搜索关键词"
                                onFocus={()=>{
                                    this.props.router.navigate('/search')
                                }}
                            />
                            <div className="bg">
                                <HomeSwiper banners={swiperList} />
                            </div>
                            <Menus menus={menus} />
                            <TopList topList={topList} />
                            <Nav tabList={tabList} getType={(type)=>{
                                this.setState({
                                    type:type,
                                    list:[]
                                },()=>{
                                    this.getDataList();
                                })
                            }}/>
                            <div className='GoodsList'>
                                {
                                    list.map((item,index)=>{
                                        return (
                                            <GoodsItem key={index} goods={item}></GoodsItem>
                                        )
                                    })
                                }
                            </div>
                        </div>
                    )
                }
            </div>
        )
    }
    async componentDidMount() {
        // 获取首页轮播数据
        let res = await getHomeList();
        // 获取排行榜数据
        let TopList = await getTopList();
        this.getDataList();
        this.setState({
            swiperList: res.data.data.banner,
            menus: res.data.data.menus,
            tabList: res.data.data.explosiveMoney,
            topList: TopList.data.data.splice(0, 3),
        })
    }
    async getDataList(){
        let list = await getGoodsList(this.state.type);
        this.setState({
            list:list.data.data.list
        },()=>{
            Toast.clear();
        })
    }
}
export default WithRouter(Home)